Advanced CSS3 and HTML5

Introduction

In the last two lessons of this course, we return to the challenge of providing inviting, accessible, fun browsing experience for users who have mobile devices.

In Lesson 9, you learned to apply responsive design to create mobile versions of a website. Responsive design is a valid and effective way to make sites mobile-friendly. It may be all that you or your clients need to have a sufficient mobile presence.

But you can, with a bit more work, provide an even more dynamic and fully mobile-friendly Web presence using jQuery Mobile.

Why Use jQuery Mobile?

jQuery Mobile sites look and feel like apps. They're highly accessible. They download quickly and continue to work when a user loses his or her Internet connection. They provide mobile-friendly navigation without the need for pointing devices. And they minimize the need for entering keystrokes with those awkward keyboards that come with mobile devices.

And here's an advantage jQuery Mobile Web apps have over coded, stand-alone apps: jQuery Mobile Web apps run in any browser, while stand-alone apps have to be built specifically for an individual mobile operating system.

In fact, an increasing number of designers refer to jQuery Mobile sites as Web apps. We'll explore the distinction in the next chapter of this lesson, but briefly, Web apps run in mobile browsers, while pure apps run without browsers.

Our exploration of jQuery Mobile will build on everything you've learned so far in this class. In Lesson 10, we used the jQuery library to make a slide show work interactively in Web pages. Here we'll expand on that approach using a powerful set of tools in jQuery and its cousin jQuery Mobile.

By the way, in case there's ongoing confusion: jQuery and jQuery Mobile aren't the same as (or even related to) the Java programming language.

By the time we're done with this lesson and the following one, I think you'll be amazed at the level of mobile-friendly animation and interactivity you can create with jQuery Mobile sites.

Surveying jQuery Mobile Sites

Before diving in and creating jQuery Mobile sites, let's survey how some major players use jQuery Mobile to provide app-like mobile Web experiences for their clients, customers, and visitors. Those sites include fun, youth-oriented sites like Walt Disney World's. Companies like Disney have to provide a dynamic, animated, highly interactive presence that looks and feels like an app to kids who are checking out the site on their tablets. Take a look, if you have a chance, at http://m.disneyworld.disney.go.com/.

Disney World's jQuery Mobile site

Stanford University maintains its prestigious educational brand with a jQuery Mobile site. You can examine it at http://m.stanford.edu/. Stanford students and prospective students can zip around campus digitally from their digital devices—after they safely park their bikes.

Stanford's jQuery Mobile site

And before moving on, let's note one more example: the mobile presence of United Airlines at http://mobile.united.com. A stressed-out business traveler can quickly check her flight status or buy a ticket on her BlackBerry while hailing a cab in Manhattan.

United Airlines' jQuery Mobile site

Understanding jQuery Mobile

We just saw how a wide range of institutions that have virtually unlimited Web resources use jQuery Mobile for their mobile Web presence. And we're about to build sites with jQuery Mobile that—while not quite as full-featured as the ones we looked at—will be very inviting and accessible.

I actually have a question for you at this point: Why don't all websites have a jQuery Mobile version?

I'll do my best to answer that, but I invite you to add your insights in the Discussion Area.

• Consciousness of the value of an app-like interactive mobile presence has not yet fully caught up to the actual need for this kind of mobile site. But there is great value to this quality of mobile presence.
• "jQuery Mobile" sounds like you might need to know JavaScript to use it. (You don't!)
• There's confusion about the difference between a Web app—an app-like website that runs in a browser (and that is easy to create with jQuery Mobile), and an app—a full-featured mobile application you buy from iTunes or Google Play.

Let's take a quick walk through these issues.

How Valuable Is a jQuery Mobile Site?

Is a jQuery Mobile-quality Web presence truly important? I've pored over studies, and frankly, the data is complicated and can be interpreted in different ways. But let me make the case for such sites with this list of 20 institutions that use jQuery Mobile for their mobile presence—a list I put together with a bit of online research:

1. Arby's
2. Boston Logan Airport
3. Chase Bank
4. Cisco Systems Home Networking
5. Dodge
6. Fiat
7. Humana
8. Ikea
9. Jeep
10. Kelly Blue Book
11. Kmart
12. Macworld
13. Monster Energy
14. PCWorld
15. Rolex
16. Safeway
17. SiriusXM
18. United Airlines
19. Verizon Wireless
20. Walt Disney World

Now that I've established (or tried to establish) why having a jQuery Mobile site is worthwhile, let's discuss how easy or difficult it is to create one.

What Do You Need to Know to Build a jQuery Mobile Site?

The sites we build in this lesson and the next one won't have all the features of the sites on the list above. But they'll be close. And we'll do all that without any scripting.

That said, you do need to know HTML. And in this era of WordPress and other template-based blogs, lack of knowledge of basic HTML may actually be an obstacle to wide adaption of jQuery Mobile.

Apps and jQuery Mobile

There's much confusion about the difference between jQuery Mobile sites and apps. Web apps built with jQuery Mobile run in a browser in mobile devices. Apps are fully independent and run without a browser.

Most mobile browsing environments hide the browser interface when a page opens, so the differences between an app and a jQuery Mobile site are almost imperceptible to a user. Take a look at screenshots from my mobile phone of two sites—Ikea and the New York Times. See if you can tell which is the app and which is a jQuery Mobile site.

IKEA and the New York Times mobile sites

The answer is that the Ikea site is a Web app built with jQuery Mobile while the Times site is an app.

There are two substantial differences between Web apps built with jQuery Mobile and apps that run outside a browser:

1. Apps that run outside a browser require a level of programming skill, time, and resources available only to institutions with relatively unlimited resources. In contrast, this class teaches pretty much everything you need to know about building a jQuery Mobile site.
2. You can sell apps that run outside a browser at iTunes and Google Play. If reaching the largest number of people with an app is your goal, a Web app will probably fit the bill. If your goal is to sell an app, then you need to pursue the resources required to do that, usually starting with the C++ programming language. (In the FAQs for this lesson, I've shared some thoughts on PhoneGap, the most widely used open-source resource for building apps without coding.)

Three Components of a jQuery Mobile Site

Okay, we've surveyed the importance and role of jQuery Mobile sites. Let's break down what goes into them:

1. A massive JavaScript program, stored at a Central Distribution Network (CDN) called jQuery. We connected to the jQuery script when we used a jQuery slide show template in the previous lesson.
2. Another massive JavaScript program, again stored at a CDN, that serves as a complement to and enhancement of jQuery and has features specially developed for mobile sites—that's the jQuery Mobile script.
3. One last centrally distributed file. This one is a massive CSS file that meshes with the jQuery Mobile script to create all the interactive elements in jQuery Mobile sites.

When we build a jQuery Mobile page, we create an HTML5 document, and we link to those three files in the <head> element. We'll walk through that process shortly.

Finally, there's the part we supply: the HTML. Much of the HTML in jQuery Mobile sites is stuff you've learned in beginning and intermediate HTML5 courses and in this class. Some of it is unique to jQuery Mobile, and we'll discuss that in detail next.

Building Your jQuery Mobile Template

At this writing, and likely for the indefinite future, there's no one-stop-shopping site for a good jQuery Mobile starter template. So let me provide one here. Follow these steps to build a jQuery Mobile page.

jQuery Mobile is evolving from a work in progress to a mature resource. As such, the links for accessing the content you need to build a page change frequently.

1. Create a new document in your code editor.
2. Save the file as mobile.html. I picked that file name more or less at random—there's nothing inherent in jQuery Mobile sites that requires any special HTML filename.
3. Begin the HTML file with this code:

<!doctype html>  
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Mobile site title</title> 
</head>  
<body> 
</body> 
</html>

4. Earlier I noted that we would include links to three files in the <head> element of our pages. Those links update periodically, so rather than give you specific code, I'll direct you to jQueryMobile.com. Look for the link to the latest stable version, which is easy to find, and click on it.

Linking to the latest stable version of jQuery Mobile

5. The code to link to the three required files appears on the page for the current version of jQuery Mobile. As I complete this course, the link is http://jquerymobile.com/download. Find those links, and copy them into your system's clipboard. If you can't find them, you can use this code. It might be a version or two behind the latest version of jQuery Mobile, but it'll work fine:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

Three links required for jQuery Mobile pages

6. Paste the three links into the <head> element of your site.

At this point, your code should look something like this:

<!doctype html>  
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Mobile site title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>  
<body> 
</body> 
</html>

Save your page. We're well on our way to building a jQuery Mobile site.

Building Page and Listview Elements

Each jQuery mobile site is made of just one HTML page! This makes them quick to download. And once users download a page, they can continue to navigate from "page" to "page" within the site even without an Internet connection.

Basically, the scripts that make jQuery Mobile function combine with the big CSS file we link to, and that's how the user can show and hide "pages" within the big HTML page. A user thinks he or she is navigating from one page to another, but he or she is really hiding part of the HTML page and showing another part.

Specially formatted navigation lists called listviews allow users to navigate from one of these "pages" to another.

The basic unit of jQuery Mobile sites, then, is the <div data-role="page"> element. These divs function like pages. And, again, users navigate around a site with links in a listview. To add five of these "pages" and a listview to your jQuery Mobile site, paste the following code into the <body> element:

<div data-role="page" id="page">
<h1>Page Heading</h1>
<p>Page content</p>
<ul data-role="listview">
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
<li><a href="#page4">Page 4</a></li>
<li><a href="#page5">Page 5</a></li>
</ul>
</div>
<div data-role="page" id="page2">
<h1>Page Heading</h1>
<p>Page content</p></div>
<div data-role="page" id="page3">
<h1>Page Heading</h1>
<p>Page content</p></div>
<div data-role="page" id="page4">
<h1>Page Heading</h1>
<p>Page content</p></div>
<div data-role="page" id="page5">
<h1>Page Heading</h1>
<p>Page content</p></div>

Now you can save and test your jQuery Mobile site in a browser. You can do this on your laptop or desktop computer; jQuery Mobile runs fine in laptops and desktops. You do, however, need to be connected to the Internet to test the site—jQuery Mobile sites don't work unless you're online and able to connect to the three linked files that make jQuery Mobile work.

Which browser should you choose? Firefox and Chrome work great for this exercise. For some of my students, using Internet Explorer 10 has caused glitches such as incorrect fonts. You can try other browsers as well, such as Opera. If you wish, visit the Discussion Area, and tell us which browser worked best for you.

Try using the navigation links in the mobile-friendly listview. Use your browser's Back button to return to the home page.

Testing a jQuery Mobile page

To add pages, copy and paste one of the div id="page" elements, and add a number to the id (for page6, page7, and so on).

Adding Headers, Footers, and Content Areas

Admittedly our site is a bit naked. There's not much styling and no real content yet. But before we add real content and some color and style, we should add three more building blocks of jQuery Mobile sites:

• A <div data-role="header"> element that holds header content for any <div data-role="page"> element
• A <div data-role="content"> element that holds the main page content for any <div data-role="page"> element
• A <div data-role="footer"> element that holds footer content for a <div data-role="page"> element

You can use only one of each of these within a <div data-role="page"> element.

Here's an example of how the second <div data-role="page"> element looks with these elements added:

<div data-role="page" id="page2"> 
<div data-role="header"> 
<h1>Page heading</h1> 
</div> 
<div data-role="content"> 
<h1>Content Area Heading</h1>
<p>Page content</p>
</div> 
<div data-role="footer"> 
<h3>Page footer</h3> 
</div> 
</div>

Customizing Content

At this point, feel free to experiment with adding headers, footers, and content areas to each of your <div data-role="page"> elements. I don't want to "spoil" the end of the lesson, but your homework assignment will involve customizing the pages with your own content, so feel free to get a jump on that now if you wish.

We've covered the basic structural elements used to build jQuery Mobile pages. To review, those are:

• <div data-role="page"> elements that define page elements within the larger HTML document
• <div data-role="listview"> elements that define navigation lists
• <div data-role="header"> elements that define headers
• <div data-role="content"> elements that define the main page content area
• <div data-role="footer"> elements that define footers

Each of these elements has customized styling built into the central CSS file that's part of the jQuery Mobile library. That styling is functional. The elements are in mobile-friendly high-contrast color schemes with readable type and intuitive background coloring.

But the styling isn't particularly inviting! To begin to solve that challenge, head to Chapter 4.

Adding to Your Options: Themes, Swatches, and Full-Sized Sites

Can you adjust how jQuery Mobile pages look by editing the CSS file that comes with jQuery Mobile? Yes, but not in the way you'd edit a normal CSS file. Why not?

1. The CSS file that makes jQuery Mobile pages work is too long and complicated—it has over a thousand lines of code.
2. The CSS file is tightly integrated with the JavaScript that makes jQuery Mobile sites work, and editing it risks corrupting the whole package.

The solution? Themes. A jQuery Mobile theme is built into the CSS file that's distributed from the jQuery Mobile CDN—one of the three files that designers link to in the <head> element of jQuery Mobile sites.

A theme is actually a collection of color swatches, or embedded color schemes. A theme makes your site more customized and attractive without risking corruption problems. The centrally distributed CSS file that makes jQuery Mobile pages work has five such themes built right into it.

Those swatches are a, b, c, d, and e. Each one applies high-contrast, mobile-friendly color schemes to whatever elements you apply them to. Those swatch color schemes include settings for interactivity (for example, colors change when a user taps an element).

Traditionally the default jQuery Mobile theme has had five different color swatches, shown below. But that theme, and those color swatches are in a constant state of change, and at this writing, the most recent jQuery Mobile theme provides just two varieties of grayscale themes. Or you might find a more recent presentation of themes by going to your favorite search engine and typing jquerymobile.com: themes.

Examining color swatches

Applying Themes and Swatches

You can define swatches for any jQuery Mobile element by adding one of these parameters to the element:

data-theme="a"

Or

data-theme="b"

And so on, all the way to "e"—at least when we're using the predefined theme that comes with jQuery Mobile. (In the next lesson, we'll break out of the limits of the preset color swatches, but first you have to get comfortable applying them.)

Here's how you might apply color swatches to elements within a <div data-role="page">:

<div data-role="page" id="page2" data-theme="e"> 
<div data-role="header" data-theme="d"> 
<h1>Page heading</h1> 
</div> 
<div data-role="content" data-theme="c"> 
<h1>Content Area Heading</h1>
<p>Page content</p>
</div> 
<div data-role="footer" data-theme="b"> 
<h3>Page footer</h3> 
</div> 
</div>

Applying color swatches

Diverting Mobile Users to jQuery

How do you divert users coming to your site on mobile devices to your jQuery Mobile site? In Lesson 9, you used media queries to provide a distinct CSS file for different browser viewport widths. But this is a different approach to detecting mobile devices. We're identifying the device, not the viewport width.

JavaScript can detect a user's operating system and thereby detect a device. If a JavaScript detects the iOS operating system, the device is an Apple mobile device. If it detects the Android operating system, the device is an Android mobile device.

Enterprising and community-minded JavaScript developers have shared a number of JavaScript generators or scripts that we can use to detect devices and divert mobile users to our jQuery Mobile site. These scripts go in the <head> content of our site's home page (often index.html). They don't go in the mobile site.

Follow these steps to embed a link to a script that detects mobile users and diverts them to our mobile.html file.

1. Open the HTML file you use as a website home page (often index.html).
2. Enter the following code before the close (</head>) tag:

<script type="text/javascript">
// <![CDATA[
    var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "mobile.html";
}
// ]]>
</script>

Save your page.

Should Tablet Users See jQuery Mobile Sites?

There's ongoing controversy among designers and tablet manufacturers over whether to divert tablet users to jQuery Mobile sites. One argument is that iPads and other large tablets have high resolution and can provide a good experience with a full-sized site. The opposing argument is that wide viewport or not, all mobile devices benefit from a jQuery Mobile site. After all, mobile devices don't have cursors. People often use them in bright sunlight and therefore need the high-contrast color schemes associated with jQuery Mobile. And mobile devices have slow download speeds, which makes the single HTML file nature of jQuery Mobile sites handy.

You'll make that call for your own sites or consult with clients on which approach to use with tablets. But if you wish to exclude a device—the iPad, for example—from the jQuery Mobile site, you can remove it from the list of devices in the JavaScript that diverts users to the mobile site.

Removing iPads would result in a script link like this. The code mentions iPods, Android devices, and BlackBerry devices, among others, but it no longer includes iPads.

<script type="text/javascript">
// <![CDATA[
    var mobile = (/iphone |ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
document.location = "mobile.html";
}
// ]]>
</script>

Providing a Full-Sized Site Option

Many mobile sites provide a "full site" option. That's a good idea.

You might have noticed, for example, that the Stanford University and United Airlines jQuery Mobile sites we looked at in Chapter 2 included links to full-sized sites.

Providing links to a full-sized site

Some users prefer a full-sized site in their mobile devices for various reasons. Sometimes there's more content in the full-sized site, or some users are more comfortable navigating around a full-sized site, even in a mobile device.

If you simply link back to your full-sized site's home page, you'll put users into a loop where they keep getting routed by the script we just added to the mobile site. One solution that doesn't require a lot of coding is to have an alternate version of your full-sized home page, with a name like index-a.html, that doesn't have the mobile diversion script.

The first step is to create a duplicate of your site's full-size home page (index.html) with a different file name (like index-a.html). You would then remove the JavaScript that diverts mobile users to the mobile page from index-a.html. After that, you'd create a link from index-a.html to the home page that's for mobile users. Here's an example of HTML code to implement that link:

Click <a href="index-a.html" rel="external">here</a> for full-sized site

The rel="external parameter forces the page to refresh the link to the appropriate CSS file.

Please join me in Chapter 5 for a game and for a summary of today's lesson.

Summary

According to the International Telecommunication Union, over six billion people have mobile devices they use to browse the Web. The time has come for Web designers at all levels to provide a fully mobile-friendly experience, not just a downsized website for smartphones and tablets.

There are two basic approaches that solve that challenge. Responsive design, which we explored in the previous lesson, can provide mobile users with an accessible, inviting interface.

jQuery Mobile provides an even more full-featured mobile experience. As you've already seen, jQuery Mobile sites feel like apps. Users navigate through them with effects (like pages that appear to "slide" open) in an inviting and dynamic way.

Problems With jQuery Mobile

While I'm gushing a bit about jQuery Mobile here, let's note a couple of drawbacks:

1. jQuery Mobile sites aren't designed to work well in full-sized browsers, and they don't work at all in Internet Explorer 8. They complement full-sized sites instead of replacing them.
2. jQuery Mobile sites require more resources to maintain than responsive design sites do. Responsive design presents the same content in full-screen and mobile versions. In contrast, jQuery Mobile sites require separate HTML content. And yet it's possible to argue that mobile sites should have unique content aimed at users with smaller devices, who need smaller chunks of information in a hurry.

And how does fluid design—creating content with widths defined in percentages—fit into this picture? Fluid design sites adapt better to mobile devices than sites created without fluid design, but fluid design alone can't provide anything close to a really mobile-friendly experience. Remember, your mobile users will have trouble with small buttons, and many color schemes can't stand up to strong daylight.

Enhancing Themes

At this point, our jQuery Mobile site is quite functional. We learned to apply the five default color swatches in the centrally distributed jQuery Mobile CSS file. But that's not enough variety in color scheme or in other style elements (like how boxes appear) to create sites with truly one-of-a-kind styling. So in our final lesson, you'll learn to generate unique themes and color swatches! But first, head over to the assignment for this lesson, so you can strengthen your basic jQuery Mobile skills.